<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>selectInput 可输入选择框组件 selectInput - layui 第三方组件平台</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="description" content="Layui select配合input实现可输入，可选择，可搜索，支持异步加载，远程搜索，也可以本地data直接赋值，主要使用场景是select框可以自己输入，就是在下拉列表里找不到自己想要的选项就可以自己输入，同时还要支持模糊匹配功能，数据源可以从本地赋值，也可以异步url请求加载，或者直接远程请求联想"> 
  <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
  <link rel="stylesheet" href="/layui/dist/css/layui.css">
  <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
 </head>
 <body>
  <div class="layui-header header header-extends" style="background-color: #24262F;"> 
   <div class="layui-container"> <a class="logo" href="https://layui.itmtr.cn/"> <img src="/static/images/layui/logo.png" alt="layui"> </a> 
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div> 
    <ul class="layui-nav"> 
     <li class="layui-nav-item layui-hide-xs"> <a href="//layui.itmtr.cn/">框架</a> </li> 
     <li class="layui-nav-item layui-hide-xs layui-this"> <a href="/extend/index.html">扩展</a> </li> 
     <li class="layui-nav-item"> <a href="javascript:;">周边</a> 
      <dl class="layui-nav-child layui-nav-child-c"> 
       <dd lay-unselect> <a href="//layui.itmtr.cn/alone.html" target="_blank">独立组件</a> 
       </dd> 
       <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="/extend/index.html">扩展组件</a> 
        <hr> 
       </dd> 
      </dl> </li> 
    </ul> 
   </div>
  </div><!--[if lt IE 9]>  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> 
  <div class="fly-extend-banner fly-extend-banner-sm"> 
   <div class="layui-carousel" id="FLY-extend-banner" data-height="200px"> 
    <div carousel-item> 
     <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
      <div style="background: rgba(0,0,0,.6)"></div> 
     </div> 
    </div> 
   </div> 
   <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1> 
   <div class="fly-extend-banner-release"> <a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
   </div> 
  </div>
  <div class="fly-extend-detail layui-card"> 
   <div class="layui-container"> 
    <div class="fly-extend-list-header"> 
     <h1 class="fly-extend-title layui-elip"> <a>selectInput 可输入选择框组件</a> <span class="layui-badge layui-bg-green layui-hide-xs">selectInput</span> </h1> 
     <div class="fly-extend-list-info"> <a href="/u/15459024/index.html" target="_blank" class="fly-extend-list-user" title="发布者"> <cite class="layui-hide-xs">会飞**子</cite> <img src="/avatar/15459024.png" alt="会飞**子"> </a> 
     </div> 
    </div> 
    <blockquote class="fly-extend-list-desc layui-elem-quote"> 
     <p>Layui select配合input实现可输入，可选择，可搜索，支持异步加载，远程搜索，也可以本地data直接赋值，主要使用场景是select框可以自己输入，就是在下拉列表里找不到自己想要的选项就可以自己输入，同时还要支持模糊匹配功能，数据源可以从本地赋值，也可以异步url请求加载，或者直接远程请求联想</p> 
    </blockquote> 
    <div class="fly-extend-list-bottom"> <span class="layui-inline">更新：2021-6-10 </span> <span class="layui-inline">创建：2020-9-10 </span> 
     <div class="layui-btn-container layui-extend-doc-edit"> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="layui-container"> 
   <div class="layui-row layui-col-space20"> 
    <div class="layui-col-sm3 layui-col-md2"> 
     <div class="layui-card"> 
      <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav"> 
       <li class="layui-this" lay-id="doc"> <a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a> </li> 
       <li lay-id="download"> <a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a> </li> 
      </ul> 
     </div> 
    </div> 
    <div class="layui-col-sm9 layui-col-md10"> 
     <div class="layui-card fly-extend-doc layui-show"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">文档</h3> 
      </div> 
      <div class="layui-card-body detail-body photos layui-text">
        示例
       <br>1、定义一个容器 ，建议使用div标签
       <br>
       <pre> &lt;div id="test"&gt;&lt;/div&gt;</pre>
       <pre>// 模块加载的机制不明白的或者加载不进来的，请参考layui官方文档或者自行百度<br>layui.config({ base: 'js/modules/' }).extend({<br>  selectInput: 'selectInput/selectInput'<br>}).use(['form', 'selectInput'], function() {<br>  var $ = layui.$, form = layui.form, selectInput= layui.selectInput;<br>           var ins = selectInput.render({<br>            // 容器id，必传参数<br>            elem: '#test1',<br>            name: 'test', // 渲染的input的name值<br>            initValue:'iPhone12 Pro Max', // 渲染初始化默认值<br>            placeholder: '请输入名称', // 渲染的inputplaceholder值<br>            // 联想select的初始化本地值，数组格式，里面的对象属性必须为value，name，value是实际选中值，name是展示值，两者可以一样<br>            data: [<br>                {value: 1111, name: 1111},<br>                {value: 2333, name: 2222},<br>                {value: 2333, name: 2333},<br>                {value: 2333, name: 2333},<br>            ],<br>            url: "https://layui.itmtr.cn/", // 异步加载的url，异步加载联想词的数组值<br>            remoteSearch: false,// 是否启用远程搜索 默认是false，和远程搜索回调保存同步<br>            // 解析回调，如果你的异步返回的data不是上述的data格式，请在此回调格式成对应的数据格式，回调参数是异步加载的数据<br>            parseData: function (data) {<br><br>            },<br>            error: function (error) { // 异步加载出错的回调 回调参数是错误msg<br><br>            },<br>            done: function (data) { // 异步加载成功后的回调 回调参数加载返回数据<br><br>            },<br>            remoteMethod: function (value, cb) { // 远程搜索的回调函数<br>                // value 是input实施输入的value值<br>                // cb是回调处理函数，请在执行ajax搜索请求成功之后执行此回调函数<br><br>                //案例<br>                //这里如果val为空, 则不触发搜索<br>                if (!value) {<br>                    return cb([]);<br>                }<br>                //这里的$.ajax去请求后台拿回数据<br>                $.ajax({<br>                    method: 'get',<br>                    url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',<br>                    data: {<br>                        keyword: val,<br>                    },<br>                    success: function (data) {<br>                        return cb(data)<br>                    }<br>                })<br>            }<br>        }<br>    });<br><br>    // 监听input 实时输入事件<br>    ins.on('itemInput(test1)', function (obj) {<br>        console.log(obj);<br>    });<br><br>    // 监听select 选择事件<br>    ins.on('itemSelect(test1)', function (obj) {<br>        console.log(obj);<br>    });<br><br><br>   // 如果使用本地数据加载，不要使用设置远程 url参数 也不要将remoteSearch参数设置为 true，完整的本地赋值数据案例<br><br>    var ins2 = selectInput.render({<br>            elem: '#test1',<br>            data: [<br>                {value: 1111, name: 1111},<br>                {value: 2333, name: 2222},<br>                {value: 2333, name: 2333},<br>                {value: 2333, name: 2333},<br>            ],<br>            placeholder: '请输入名称',<br>            name: 'list_common',<br>            remoteSearch: false<br>      });<br><br><br>   // 这是我项目中的需求做的一个组件，可能存在一些问题，如果有问题可以联系我，也可以去码云提问，有时间我会去看的，会尽量完善这个组件的<br><br>   // 2020-10-23 更新：允许value和name值不同，显示用name，取值用value；新增参数initValue，设置input默认初始值<br>});</pre> 
      </div> 
     </div> 
     <div class="layui-card fly-extend-doc"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">下载</h3> 
      </div> 
      <div class="layui-card-body detail-body layui-text"> 
       <div class="layui-btn-container"> <a href="//cdn.layui.com/extend/15459024_1603434719671_15799.zip" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary"> 立即下载 </a> <a href="https://gitee.com/JerryZst/select-input.git" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary layui-border-red"> 去码云下载 </a> 
        <blockquote class="layui-elem-quote">
          该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="fly-footer"> 
   <p>Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
  </div>
  <script src="/layui/dist/layui.js"></script>
  <script>// common</script>

 </body>
<script src="/common/common.js"></script>
</html>